<template>
  <div>
    <!-- views/Components.vue -->
    <el-container>
      <el-header style="background: #545c64; height: 80px">
        <el-menu
          mode="horizontal"
          default-active="2"
          background-color="#545c64"
          text-color="#bbb"
          active-text-color="#fff"
        >
          <el-menu-item
            ><img
              src="../../public/pic/logo/6.png"
              alt=""
              style="width=140px;height:50px"
          /></el-menu-item>
          <el-menu-item
            ><h1
              style="
                text-algin: center;
                width: calc(100vw - 600px);
                font-size: 30px;
                color: fff;
              "
            >
              欢 迎 登 录 后 台 管 理 系 统
            </h1></el-menu-item
          >
          <el-button
          @click="logOut"
            style="
              float: right;
              height: 80px;
              background-color: #545c64;
              border: 0;
              color: white;
            "
            >退出</el-button
          >
          <el-button style="float: right;
             margin: 0 20px;
              background:#545c64;
              border: 0;
              height: 80px;
              color: white;">
            
              <!-- <img src="../assets/2.png" /> -->
              <span>欢迎管理员:&nbsp;{{admin}}</span>                
                               
          </el-button>
          
        </el-menu>
      </el-header>
      <el-container>
        <el-aside width="200px" class="aside-menu scroll">
          <el-menu
            router
            :default-active="$route.path"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="rgb(0, 177, 169)"
            style="border: 1px solid #545c64; text-align: left;margin-left:20px;"
          >
            <el-menu-item index="/backstage/sales">
              <i class="el-icon-s-data"></i>
              车辆销量
            </el-menu-item>
            <el-menu-item index="/backstage/users">
              <i class="el-icon-s-custom"></i>
              用户中心
            </el-menu-item>
            <el-menu-item index="/backstage/commodity">
              <i class="el-icon-sell"></i>
              商品详情
            </el-menu-item>
            <el-menu-item index="/backstage/indent">
              <i class="el-icon-shopping-cart-full"></i>
              预约中心
            </el-menu-item>
            <el-menu-item 
            v-if="admin=='root'"
            index="/backstage/conservator">
              <i class="el-icon-user"></i>
              管理员
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main class="main">
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  data() {
    return {
      admin:'',
    }
  },
  methods: {
    ...mapMutations(["logOut"]),
  },
  created () {
   if(sessionStorage.getItem('admin')){
    this.admin=sessionStorage.getItem('admin')
   }else{
    this.$router.push('/admin')
   }
  },
}
</script>

<style scoped>
.el-card__body, .el-main {
  padding: 0px !important;
}
.main {
  height: calc(100vh - 80px);
}
.aside-menu {
  height: calc(100vh - 80px);
  padding-left: 15px;
  background-color: #545c64;
}

.el-menu {
  border-bottom: #545c64;
}

.el-menu--horizontal > .el-menu-item {
  height: 80px;
  line-height: 80px;
}
</style>
